<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>images</title>
	<style type="text/css">
		div{padding:0px; margin:0px; border:1px solid red;}
		div.title{width:400px; height:200px;margin:0 auto;}
		div.wapper{}
		div.wapper .item{width:200px; height:300px; margin:5px; float: left;}
	</style>
	<link href="css/jquery.lightbox-0.5.css" />
	<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="js/blocksit.min.js"></script>
	<script type="text/javascript" src="js/jquery.lazyload.min.js"></script>
	<script type="text/javascript" src="js/jquery.lightbox-0.5.min.js"></script>
</head>
<body>
	<div class="title">
		<h1>图片墙</h1>
		<select id="category">
			<option value="gif">gif</option>
			<option value="fresh">fresh</option>
		</select>
		<button id="button">确定</button>
	</div>
	<div class="wapper">
	
	</div>
	<script type="text/javascript">
		$(function(){
			$('#button').click(function(){
				$('.wapper').html('');
				loadImages();
			});
			function blockImages(){
				$('.wrapper').BlocksIt({
					numOfCol : 5
				});
			}
			var pageNum = 1;
			function loadImages(){
				console.log(pageNum);
				var category = $('#category').val();
				console.log(category);
				$.ajax({
					url : 'data.jsp',
					type : 'post',
					data : {pageNum : pageNum , category : category},
					dataType : 'json',
					success : function(data){
						for(var i = 0 ; i < data.length ; i++){
							var img = '';
							img += '<div class="item">'
							img += '<img src="';
							img += data[i].shortUrl;
							img += '"/>';
							img += '';
							img += '</div>'; 
							$('.wapper').append(img);
						}
						pageNum ++;
					}
				});
			}
			
		});
	</script>
</body>
</html>